import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { BookOpen, ChevronDown, ChevronUp, AlertTriangle } from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';

export default function FormulaDisplay({ standard, formulas, warningNote }) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <Card className="border-purple-200 bg-gradient-to-br from-purple-50 to-white">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="flex items-center gap-2 text-base">
            <BookOpen className="w-5 h-5 text-purple-600" />
            计算依据与公式说明
          </CardTitle>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setIsExpanded(!isExpanded)}
            className="text-purple-600 hover:text-purple-700 hover:bg-purple-100"
          >
            {isExpanded ? (
              <>
                <ChevronUp className="w-4 h-4 mr-1" />
                收起
              </>
            ) : (
              <>
                <ChevronDown className="w-4 h-4 mr-1" />
                展开查看
              </>
            )}
          </Button>
        </div>
        {!isExpanded && (
          <p className="text-sm text-gray-600 mt-2">
            参考标准: <span className="font-medium text-purple-700">{standard}</span>
          </p>
        )}
      </CardHeader>
      
      {isExpanded && (
        <CardContent className="space-y-4 pt-0">
          <div className="bg-purple-100 px-3 py-2 rounded-md">
            <p className="text-sm text-purple-900">
              <span className="font-semibold">参考标准：</span>{standard}
            </p>
          </div>

          {warningNote && (
            <Alert variant="destructive" className="bg-yellow-50 border-yellow-300">
              <AlertTriangle className="h-4 w-4 text-yellow-600" />
              <AlertDescription className="text-yellow-800 text-sm">
                {warningNote}
              </AlertDescription>
            </Alert>
          )}

          <div className="space-y-4">
            {formulas.map((formula, index) => (
              <div key={index} className="border border-purple-200 p-4 rounded-lg bg-white">
                <h4 className="text-sm font-bold mb-2 text-purple-900">
                  {index + 1}. {formula.name}
                </h4>
                <p className="text-sm text-gray-700 mb-3">{formula.description}</p>
                
                <div className="bg-purple-50 p-3 rounded-md mb-3 border border-purple-200">
                  <code className="font-mono text-sm text-purple-900">{formula.formula}</code>
                </div>

                {formula.variables && formula.variables.length > 0 && (
                  <div className="mb-3">
                    <p className="text-sm font-semibold text-gray-800 mb-1">变量说明：</p>
                    <ul className="text-sm text-gray-700 space-y-1 pl-4">
                      {formula.variables.map((v, vIndex) => (
                        <li key={vIndex} className="flex gap-2">
                          <code className="font-mono text-purple-700 font-semibold">{v.symbol}</code>
                          <span>- {v.description} ({v.unit})</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                {formula.conditions && formula.conditions.length > 0 && (
                  <div className="mb-2">
                    <p className="text-sm font-semibold text-gray-800 mb-1">注意事项：</p>
                    <ul className="text-sm text-gray-600 space-y-1 pl-4 list-disc">
                      {formula.conditions.map((c, cIndex) => (
                        <li key={cIndex}>{c}</li>
                      ))}
                    </ul>
                  </div>
                )}

                {formula.reference && (
                  <p className="text-xs text-gray-500 mt-2 italic">
                    参考：{formula.reference}
                  </p>
                )}
              </div>
            ))}
          </div>
        </CardContent>
      )}
    </Card>
  );
}